import styled from "styled-components";
import playBg from '../../../assets/images/play.png'

export const MusicClubAlbumBox = styled.div`
  /* height: 500px; */
  background-color: #fafafa;
  padding: 10px 0;
  h2{
    font-size: 30px;
    padding: 5px 0;
    border-bottom:  2px solid #3ac27c;
    a{
      display: inline-block;
      color: #000000;
      padding: 4px 8px;
      font-size: 14px;
      margin-right: 15px;
      border-radius: 5px;
      &:nth-child(1){
        margin-left: 30px;
      }
      &.active{
        background-color: #3ac27c;
        color: #ffffff;
      }
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .content_item{
      width: 228px;
      height: 309px;
      /* background-color: red; */
      color: #000000;
      font-size: 14px;
      margin-bottom: 15px;
      .pic{
        position: relative;
        &:hover{
          img{
            filter: brightness(55%);
          }
          .pic_play{
            opacity: 1;
            background: url(${playBg}) center/70px no-repeat;
          }
        }
        .pic_play{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          width: 80px;
          height: 80px;
          background: url(${playBg}) center/50px no-repeat;
          opacity: 0;
          transition: all .4s;
        }
      }
      .info {
        span{
          display: block;
        }
        span:nth-child(n+2){
          color: #999999;
        }
        span:nth-child(1){
          margin-top: 10px;
          &:hover{
            color: #3ac27c;
          }
        }
      }
    }


  }
  .fenye{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    .ant-pagination{
      width: 580px;
    }
  }
`